<template>
  <a-modal
    title="督导听课评价"
    :visible="visible"
    @ok="handleSubmit"
    @cancel="$emit('cancel')"
    :width="800"
    :confirmLoading="loading"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="教师姓名">
            <a-input
              v-decorator="['teacherName', { initialValue: evaluation.teacherName }]"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="课程名称">
            <a-input
              v-decorator="['courseName', { initialValue: evaluation.courseName }]"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="上课时间">
            <a-input
              v-decorator="['classTime', { initialValue: evaluation.classTime }]"
              disabled
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="上课地点">
            <a-input
              v-decorator="['classLocation', { initialValue: evaluation.classLocation }]"
              disabled
            />
          </a-form-item>
        </a-col>
      </a-row>
      
      <!-- 评价指标部分 -->
      <div class="evaluation-criteria">
        <h3>评价指标</h3>
        <a-divider />
        
        <div v-for="(criterion, index) in evaluationCriteria" :key="index">
          <a-form-item :label="criterion.title">
            <a-radio-group
              v-decorator="[`criteria_${index}`, { rules: [{ required: true, message: '请选择评价等级' }] }]"
            >
              <a-radio
                v-for="(option, optIndex) in criterion.options"
                :key="optIndex"
                :value="option.value"
              >
                {{ option.label }} ({{ option.score }}分)
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-divider />
        </div>
        
        <a-form-item label="总体评价">
          <a-textarea
            v-decorator="['overallComment', { rules: [{ required: true, message: '请输入总体评价' }] }]"
            placeholder="请输入对本次课程教学的总体评价"
            :rows="4"
          />
        </a-form-item>
        
        <a-form-item label="建议与意见">
          <a-textarea
            v-decorator="['suggestions']"
            placeholder="请输入改进建议与意见"
            :rows="4"
          />
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    evaluation: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      evaluationCriteria: [
        {
          title: '1. 教学准备',
          options: [
            { label: '优秀', value: 'excellent', score: 10 },
            { label: '良好', value: 'good', score: 8 },
            { label: '一般', value: 'average', score: 6 },
            { label: '较差', value: 'poor', score: 4 },
          ],
        },
        {
          title: '2. 教学内容',
          options: [
            { label: '优秀', value: 'excellent', score: 20 },
            { label: '良好', value: 'good', score: 16 },
            { label: '一般', value: 'average', score: 12 },
            { label: '较差', value: 'poor', score: 8 },
          ],
        },
        {
          title: '3. 教学方法',
          options: [
            { label: '优秀', value: 'excellent', score: 20 },
            { label: '良好', value: 'good', score: 16 },
            { label: '一般', value: 'average', score: 12 },
            { label: '较差', value: 'poor', score: 8 },
          ],
        },
        {
          title: '4. 教学态度',
          options: [
            { label: '优秀', value: 'excellent', score: 10 },
            { label: '良好', value: 'good', score: 8 },
            { label: '一般', value: 'average', score: 6 },
            { label: '较差', value: 'poor', score: 4 },
          ],
        },
        {
          title: '5. 教学效果',
          options: [
            { label: '优秀', value: 'excellent', score: 20 },
            { label: '良好', value: 'good', score: 16 },
            { label: '一般', value: 'average', score: 12 },
            { label: '较差', value: 'poor', score: 8 },
          ],
        },
        {
          title: '6. 课堂管理',
          options: [
            { label: '优秀', value: 'excellent', score: 10 },
            { label: '良好', value: 'good', score: 8 },
            { label: '一般', value: 'average', score: 6 },
            { label: '较差', value: 'poor', score: 4 },
          ],
        },
        {
          title: '7. 学生参与',
          options: [
            { label: '优秀', value: 'excellent', score: 10 },
            { label: '良好', value: 'good', score: 8 },
            { label: '一般', value: 'average', score: 6 },
            { label: '较差', value: 'poor', score: 4 },
          ],
        },
      ]
    }
  },
  
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('submit', values);
        }
      });
    }
  }
}
</script>

<style scoped>
.evaluation-criteria h3 {
  margin-bottom: 16px;
  font-weight: bold;
}
</style>